<template>
    <div>
        <div v-loading="fullscreenLoading">
            <div class="header">
                <el-button type="primary" size="medium" @click="dialogVisible = true">添加</el-button>
            </div>
            <table class="table" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <th>序号</th>
                    <th>阶段一</th>
                    <th>阶段二</th>
                    <th>阶段三</th>
                    <th>阶段四</th>
                    <th>阶段五</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(itemList, index) in list" :key="index">
                        <td>{{index + 1}}</td>
                        <td v-for="item in itemList" :key="item.id">
                            <template v-if="item.num">
                                <p>{{item.name}}</p>
                                <p>{{item.num}}人/{{(item.ratio * 10).toFixed(1)}}折扣</p>
                            </template>
                            <template v-else>
                                <p>无</p>
                            </template>
                        </td>
                        <td width="300">
                            <button @click="deleteItem(itemList[0].groupkey)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="noData" v-if="!list.length">暂无数据</p>
        </div>

        <el-dialog title="新增" :visible.sync="dialogVisible" width="750px">
            <div class="dialog-inner">
                <table class="dialog-table" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th>阶段</th>
                        <th>名称</th>
                        <th>人数</th>
                        <th>折扣(折)</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item, index) in form" :key="index">
                        <td>阶段{{convertToChinaNum(index + 1)}}</td>
                        <td>
                            <input v-model="item.name" type="text" />
                        </td>
                        <td>
                            <input v-model="item.num" type="text" />
                        </td>
                        <td>
                            <input v-model="item.ratio" type="text" />
                        </td>
                        <td>
                            <el-button
                                icon="el-icon-close"
                                size="mini"
                                @click="removeItem(index)"
                            >移除</el-button>
                        </td>
                    </tr>
                </table>
                <div class="d-btns">
                    <el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
                    <el-button size="small" type="primary" @click="postData">提交</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as request from "@/api/system";
import { convertToChinaNum, regExp } from "@/utils";

export default {
    data() {
        return {
            list: [],
            fullscreenLoading: false,
            dialogVisible: false,
            type: 0,
            form: [
                {
                    name: "",
                    num: "",
                    ratio: ""
                },
                {
                    name: "",
                    num: "",
                    ratio: ""
                },
                {
                    name: "",
                    num: "",
                    ratio: ""
                }
            ]
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        convertToChinaNum,
        /* 获取列表数据 */
        async getData() {
            this.fullscreenLoading = true;
            try {
                const { errno, data, errmsg } = await request.ladderList();
                if (errno === 0) {
                    this.list = data;
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
            this.fullscreenLoading = false;
        },

        removeItem(index) {
            if (this.form.length > 3) {
                this.form.splice(index, 1);
            } else {
                this.$message.warning("最少设置三个阶段");
            }
        },
        add() {
            if (this.form.length < 5) {
                this.form.push({ name: "", num: "", ratio: "" });
            } else {
                this.$message.warning("最多设置五个阶段");
            }
        },
        async postData() {
            let flag = true;
            for (let i = 0; i < this.form.length; i++) {
                if (!this.form[i].name) {
                    flag = false;
                    return this.$message.warning(
                        "请输入阶段" + convertToChinaNum(i + 1) + "的名称"
                    );
                } else if (!this.form[i].num) {
                    flag = false;
                    return this.$message.warning(
                        "请输入阶段" + convertToChinaNum(i + 1) + "的人数"
                    );
                } else if (!this.form[i].ratio) {
                    flag = false;
                    return this.$message.warning(
                        "请输入阶段" + convertToChinaNum(i + 1) + "的折扣"
                    );
                } else if (!regExp.posInt(this.form[i].num)) {
                    flag = false;
                    return this.$message.warning(
                        "阶段" + convertToChinaNum(i + 1) + "的人数须为正整数"
                    );
                } else if (!regExp.PosDecimal(this.form[i].ratio)) {
                    flag = false;
                    return this.$message.warning(
                        "阶段" +
                        convertToChinaNum(i + 1) +
                        "的折扣须为小于1的小数"
                    );
                } else if (i) {
                    if (Number(this.form[i].num) <= Number(this.form[i - 1].num)) {
                        flag = false;
                        return this.$message.warning(
                            "阶段" +
                            convertToChinaNum(i + 1) +
                            "的人数须大于阶段" +
                            convertToChinaNum(i) +
                            "的人数"
                        );
                    }
                    if (Number(this.form[i].ratio) >= Number(this.form[i - 1].ratio)) {
                        flag = false;
                        return this.$message.warning(
                            "阶段" +
                            convertToChinaNum(i + 1) +
                            "的折扣须大于阶段" +
                            convertToChinaNum(i) +
                            "的折扣"
                        );
                    }
                }
            }
            if (flag) {
                let params = [...this.form];
                for (let i = 0; i < 5 - this.form.length; i++) {
                    params.push({ name: 0, num: 0, ratio: 0 });
                }
                try {
                    const { errno, errmsg } = await request.addLadder(
                        params
                    );
                    if (errno === 0) {
                        this.dialogVisible = false
                        this.getData();
                        this.$message.success(errmsg);
                    } else {
                        this.$message.warning(errmsg);
                    }
                } catch (err) {
                    console.error(err);
                }
            }
        },

        async deleteItem(groupkey) {
            try {
                await this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                const { errno, errmsg } = await request.delLadder({ groupkey });
                if (errno === 0) {
                    this.getData();
                    this.$message.success(errmsg);
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.log(err);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.header {
    padding: 30px 0 0 20px;
}
.table {
    width: 100%;
    th {
        height: 100px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        font-size: 18px;
    }
    td {
        height: 120px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
    }
    button {
        margin: 0 10px;
        width: 110px;
        height: 32px;
        background-color: #3699ff;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        border-radius: 2px;
    }
    .img {
        width: 150px;
        height: 100px;
    }
    .desc {
        width: 500px;
    }
}
.noData {
    margin-top: 40px;
    text-align: center;
    color: #888;
}
.dialog-inner {
    margin-top: -20px;
    padding: 0 10px;
    .dialog-table {
        width: 100%;
        text-align: center;
        th {
            margin-bottom: 15px;
        }
        td {
            height: 60px;
            input {
                width: 100px;
                height: 36px;
                border: 1px dashed #ccc;
            }
        }
    }
    .d-btns {
        margin-top: 20px;
        text-align: center;
    }
}
</style>